<template>
    <div>
      <div>
      <div><center><h1>角色职级管理</h1></center></div>
      <div>
          <el-table :data="rank_list" border style="width: 50%">
              <el-table-column fixed prop="id" label="ID" width="150">
            </el-table-column>
            <el-table-column fixed prop="rank" label="职级" width="150">
            </el-table-column>
            
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button @click="change(scope.row.id)" type="text" size="small"
                  >修改</el-button>
                <el-button @click="del(scope.row.id)" type="text" size="small"
                  >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button @click="add">新增职级</el-button>
      </div>
      <div>
            <el-drawer
                title="添加职级信息"
                :visible.sync="drawer"
                direction="rtl">
                <span>新职级:<input v-model="obj.rank"/></span><br>
                
                <span><el-button @click="realAdd">确认添加</el-button></span>
            </el-drawer>
      </div>
      <div>
            <el-drawer
                title="修改职级信息"
                :visible.sync="drawer1"
                direction="rtl">
                <span>新职级:<input v-model="obj1.rank"/></span><br>
                
                <span><el-button @click="realChange(obj1.id)">确认修改</el-button></span>
            </el-drawer>
        </div>
    </div>
    </div>
  </template>
  
  <script>
  export default {
  data(){
    return{
      rank_list:[],
      drawer:false,
      drawer1:false,
      obj:{
        id:'',
        rank:'',
        
      },
      obj1:{
        id:'',
        rank:'',
        
      }
    }
  },
  mounted(){
    this.Rank()
  },
  methods:{
    Rank(){
      this.$axios.get('users/api/v1/rank/')
      .then(res=>{
        console.log(res)
        if (res.data.code == 200){
          this.rank_list = res.data.rank
        }
      })
    },
    add(){
      this.drawer = true
    },
    realAdd(){
      this.$axios.post('users/api/v1/rank/',this.obj)
      .then(res=>{
        console.log(res)
        if (res.data.code == 200){
          alert(res.data.msg)
          this.drawer = false
          this.Rank()
        }
      })
    },
    change(id){
      this.drawer1=true
      this.$axios.get('users/api/v1/rank/'+id+'/')
      .then(res=>{
        console.log(res)
        if (res.data.code == 200){
          this.obj1 = res.data.data
        }
      })
    },
    realChange(id){
      this.$axios.put('users/api/v1/rank/'+id+'/',this.obj1)
      .then(res=>{
        console.log(res)
        if (res.data.code == 200){
          alert(res.data.msg)
          this.drawer1 = false
          this.Rank()
        }
      })
    },
    del(id){
      this.$axios.delete('users/api/v1/rank/'+id+'/')
      .then(res=>{
        console.log(res)
        if(res.data.code == 200){
          alert(res.data.msg)
          this.Rank()
        }
      })
    }
  }
  }
  </script>
  
  <style>
  
  </style>